<template>
    <div class="city_banner">
         <!-- <swipe class="my-swipe">
                 <swipe-item class="swiper-wrapper" v-for="(item, index) in banneRList">
                        <div class="banner-img">
                            <img :src="item.src"/>
                        </div>
                </swipe-item>
                 <swipe-item class="swiper-wrapper" v-for="(item, index) in banneRList">
                        <div class="banner-img">
                            <img :src="item.src"/>
                        </div>
                </swipe-item>
                 <div class="swiper-pagination">
                     
                 </div>
         </swipe>  -->
         <section>
               <div class="swiper-container">              
                      <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item, index) in sliderData">
                             <!--  <router-link to="/active/20161111" class="banner__img__goto">
                                     <img :src="item.src" alt=""/>
                              </router-link> -->
                                  <a :href="item.href" class="banner__img__goto">
                                         <img :src="item.src" alt=""/>
                                  </a>
                            </div>
                      </div>
                      <div class="swiper-pagination">
                         
                      </div>
              </div>
         </section>
         
    </div>
</template>

<script>
    // import { Swipe, SwipeItem } from 'vue-swipe';   
    // require('vue-swipe/dist/vue-swipe.css');
    // require('swiper/dist/js/swiper.min.js');
    // require('swiper/dist/css/swiper.min.css');
    import "swiper/dist/js/swiper.min.js";
    import "swiper/dist/css/swiper.min.css";
    export default {
        data() {
            return {
                // banneRList:null //banner列表
            }
        },
        props:['sliderData'],
        // components: {
        //      'swipe' : Swipe,
        //      'swipe-item' : SwipeItem
        // },
        updated(){
             var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    // nextButton: '.swiper-button-next',
                    // prevButton: '.swiper-button-prev',
                    // slidesPerView: 1,
                    paginationClickable: true,
                    // spaceBetween: 30,
                    loop: true,
                    autoplay:1000,
                });
        },
        mounted () {
            
        },
        created(){  
            let that = this;
        },

    }

</script>

<style lang="scss" scoped>
    @import 'src/common/styles/mixins';
    .banner-img{
        width: 100%;
        // height: px2rem(400);
         img{
            width: 100%;
         }
    }
    img{
        width:100%;
    }
    .city_banner{
         width: 100%;
         margin-top: px2rem(20);
        .swiper-container{
            width: 100%;
            // height: px2rem(350);
             .swiper-wrapper {
                  .swipe-slide{
                   text-align: center;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    .banner__img__goto{
                         width: 100%;
                          width: 100%;
                         }
                    }

                  }

            }
        }
    
    .my-swipe {
         width: 100%;
         height: px2rem(350);
             .swiper-wrapper {
                  width: 100%;
                  img{
                    width: 100%;
                  }
            }
    }



</style>
